<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/css/style.css' />
    <link rel='stylesheet' href='/css/chat.css' />
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">

        <div class="chatbox" id="js_chatbox">
          <div class="tabs">
            <div class="tab-hd">
              <a data-id="1" class="active" href="javascript:;">
                  <span class="avatar"><img src="http://placehold.it/32x32/7ecdc5/fff" alt=""/></span>群聊
                  <i class="close">x</i>
              </a>
            </div>
            <div class="tab-wrap">
              <div class="tab-bd">
                  <div class="hd">
                      <span class="tt">群聊</span>
                      <i class="min">-</i>
                      <i class="close js_close">x</i>
                  </div>
                  <div class="bd">
                      <div class="mn">
                          <div class="mnc">
                              <div class="msg-list">
                                  <ul>

                                      <li class="timeline">2014-11-11   09:56</li>
                                      <li class="ask"><i class="avatar">AK</i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>
                                      <li class="answer"><i class="avatar"><img src="./Images/head2.jpg"></i><div class="wrap"><div class="content">Instagram被墙，回忆不能被墙。面对那堵墙，我们无能为</div></div></li>


                                  </ul>
                              </div>
                              <div class="bottom">
                                  <form class="form js_form" autocomplete="off">
                                      <div class=" col-md-12 col-sm-12 col-xs-12 insert ">
                                          <i class="icon js_face" title="表情"> </i>
                                          <div class="face">
                                              <div class="arrow"></div>
                                              <div class="face-tt"><a class="close" title="关闭" href="javascript:void(0);"></a></div>
                                              <div class="face-bd">
                                                  <div class="list clearfix">
                                                      <ul></ul>
                                                  </div>
                                              </div>
                                          </div>

                                      </div>
                                      <div class="ipt"><input class="js_ipt" type="text" placeholder="" /></div>
                                      <div class="send"><span>按Enter键发送</span><input class="btn" type="submit" name="button" value="发送"> </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                      <!--<div class="sd">-->
                          <!--<p class="name">Akylone</p>-->
                          <!--<p class="sex">男</p>-->
                          <!--<p class="country">中国</p>-->
                          <!--<p class="province">安徽</p>-->
                      <!--</div>-->
                      <div class="sd">
                          <div class="calendar">
                              <div class="create">本群创建于</div>
                              <div class="at">2015/12/12</div>
                          </div>
                          <div class="group clearfix">
                              <div class="total">组成员(6/50)</div>
                              <ul>
                                  <!--<li><a href="javascript:;" onclick="opt(this)"><span class="avatar">小妖</span>小妖</a></li>-->
                                  <!--<li><a href="javascript:;" onclick="opt(this)"><span class="avatar">18</span>18523794229</a></li>-->
                                  <!--<li><a href="javascript:;" onclick="opt(this)"><span class="avatar">49</span>49770163@qq.com</a></li>-->
                              </ul>
                          </div>
                          <a class="add" onclick="addGroup()"><i></i> 邀请好友</a>
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div class="chat-msg" id="js_alert">
          <span class="num">0</span>
          <div class="icon"></div>
        </div>

      </div>
    </div>
  </div>
  <script>
    //ui
    var ui ={};
    ui._single_bd =function(data){
      return ('<div class="tab-bd" style="display: none">' +
      '                <div class="hd">' +
      '                    <span class="tt">'+data.name+'</span>'+
      '                    <i class="close js_close">x</i>' +
      '                </div>' +
      '                <div class="bd">' +
      '                    <div class="mn">' +
      '                        <div class="mnc">' +
      '                            <div class="msg-list js_msg">' +
      '                                <ul></ul>' +
      '                            </div>' +
      '                            <div class="bottom">' +
      '                                <form class="form js_form" autocomplete="off">' +
      '                                    <div class=" col-md-12 col-sm-12 col-xs-12 insert ">' +
      '                                        <i class="icon js_face" title="表情"> </i>' +
      '                                        <div class="face">' +
      '                                            <div class="arrow"></div>' +
      '                                            <div class="face-tt"><a class="close" title="关闭" href="javascript:void(0);"></a></div>' +
      '                                            <div class="face-bd">' +
      '                                                <div class="list clearfix">' +
      '                                                    <ul></ul>' +
      '                                                </div>' +
      '                                            </div>' +
      '                                        </div>' +
      '                                    </div>' +
      '                                    <div class="ipt"><input class="js_ipt" type="text" placeholder="" /></div>' +
      '                                    <div class="send"><span>按Enter键发送</span><input class="btn" type="submit" name="button" value="发送"> </div>' +
      '                                </form>' +
      '                            </div>' +
      '                        </div>' +
      '                    </div>' +
      '                    <div class="sd">' +
      '                        <p class="name">' + data.name + '</p>' +
      '                        <p class="sex">' + data.sex + '</p>' +
      '                        <p class="country">' + data.country + '</p>' +
      '                        <p class="province">' + data.province + '</p>' +
      '                    </div>' +
      '                </div>' +
      '            </div>');
    };
    ui._single_hd =function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      return (' <a data-id="' + data.id + '" href="javascript:;">'+
      '  <span class="avatar">'+
      head+
      '    </span>'+
      '     聊天1'+
      '   <i class="close">x</i>'+
      '  </a>');
    };
    ui.ask = function(data){
      var head;
      if(data.type==17){
        for(var i in data.menberList){
          if(data.toId ==  data.menberList[i].id){
            head = data.menberList[i].head ? '<img src="'+ data.menberList[i].head +'" alt=""/>':formatName(data.menberList[i].name);
            break;
          }
        }
      }else{
        head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      }
      return ('<li class="ask">'+
      '    <i class="avatar">'+
      head+
      '    </i>'+
      '    <div class="wrap">'+
      '        <div class="content">ask，回忆不能被ask墙。面对那堵墙ask，我们无能为</div>'+
      '    </div>'+
      '</li>');
    };
    ui.answer = function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      return ('<li class="answer">'+
      '    <i class="avatar">'+
      head+
      '    </i>'+
      '    <div class="wrap">'+
      '        <div class="content">'+data.content+'</div>'+
      '    </div>'+
      '</li>');
    };
    ui._group_hd =function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      return (' <a data-id="' + data.id + '" href="javascript:;">'+
      '  <span class="avatar">'+
      head+
      '    </span>'+
      '     聊天1'+
      '   <i class="close">x</i>'+
      '  </a>');
    };
    ui._group_bd =function(data){
      var head = data.head ? '<img src="'+ data.head +'" alt=""/>':formatName(data.name);
      var frindList = function(){
        var _html ="";
        for(var i in data.menberList){
          var friend_head = data.menberList[i].head ? '<img src="'+ data.menberList[i].head +'" alt=""/>':formatName(data.menberList[i].name);
          _html +='<li><a href="javascript:;" onclick="opt(this)"><span class="avatar">'+ friend_head +'</span>'+data.menberList[i].name+'</a></li>';
        }
        return _html;
      }
      return ('<div class="tab-bd">'+
      '                <div class="hd">'+
      '                    <span class="tt">'+data.name+'</span>'+
      '                    <i class="min">-</i>'+
      '                    <i class="close js_close">x</i>'+
      '                </div>'+
      '                <div class="bd">'+
      '                    <div class="mn">'+
      '                        <div class="mnc">'+
      '                            <div class="msg-list js_msg">'+
      '                                <ul>'+
      '                                </ul>'+
      '                            </div>'+
      '                            <div class="bottom">'+
      '                                <form class="form js_form" autocomplete="off">'+
      '                                    <div class=" col-md-12 col-sm-12 col-xs-12 insert ">'+
      '                                        <i class="icon js_face" title="表情"> </i>'+
      '                                        <div class="face">'+
      '                                            <div class="arrow"></div>'+
      '                                            <div class="face-tt"><a class="close" title="关闭" href="javascript:void(0);"></a></div>'+
      '                                            <div class="face-bd">'+
      '                                                <div class="list clearfix">'+
      '                                                    <ul></ul>'+
      '                                                </div>'+
      '                                            </div>'+
      '                                        </div>'+
      '                                    </div>'+
      '                                    <div class="ipt"><input class="js_ipt" type="text" placeholder="" /></div>'+
      '                                    <div class="send"><span>按Enter键发送</span><input class="btn" type="submit" name="button" value="发送"> </div>'+
      '                                </form>'+
      '                            </div>'+
      '                        </div>'+
      '                    </div>'+
      '                    <div class="sd">'+
      '                        <div class="calendar">'+
      '                            <div class="create">本群创建于</div>'+
      '                            <div class="at">2015/12/12</div>'+
      '                        </div>'+
      '                        <div class="group clearfix">'+
      '                            <div class="total">组成员(6/50)</div>'+
      '                            <ul>'+
      frindList() +
      '                            </ul>'+
      '                        </div>'+
      '                        <a class="add" onclick="addGroup()"><i></i> 邀请好友</a>'+
      '                    </div>'+
      '                </div>'+
      '            </div>');
    };
    ui.opt =function(data) {
      return ('<div class="dropdown">' +
      '    <a href="javascript:;" onclick="privateChat(this)" class="active">发送消息</a>' +
      '    <a href="javascript:;" onclick="removeChat(this)">移除成员</a>' +
      '</div>');
    }
   </script>
  <script src="/javascripts/jquery-1.11.2.js"></script>
  <script src="/javascripts/plugin/jquery.mousewheel.js"></script>
  <script src="/javascripts/plugin/jquery.rollbar.min.js"></script>
  <script src="/javascripts/util/jquery.emoticons.js"></script>
  <script src="/javascripts/plugin/socket.io-1.4.5.js"></script>
  <script src="/javascripts/module/singlechat.js"></script>
  </body>
</html>
